<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内网测试服务器</title>
    <link rel="stylesheet" href="/logView/layui/css/layui.css" media="all">
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body onbeforeunload="closeWebSocket()">
<div class="layui-row" style="height: 100%">
    <div id="logView" class="layui-col-sm9" style="height: 100%">
        <div id="log-container" style="height:85%;overflow-y: scroll; background: #333; color: #aaa;">
            <div>
            </div>
        </div>

        <!--//下半部分-->
        <div class="layui-col-xs12" style="height: 15%;padding-top:15px;padding-left: 15px">
            <div class="layui-form-item layui-col-xs6">
                <label class="layui-form-label">待查看文件:</label>
                <div class="layui-input-block">
                    <input type="text" id="filePathName" lay-verify="required" placeholder="请输入待查看文件" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <button class="layui-btn" id="view">查看</button>
                <button class="layui-btn" id="close">断开</button>
                <button class="layui-btn" id="clear">清理</button>
                <button class="layui-btn" id="hidden">隐藏</button>
            </div>
        </div>
    </div>

    <!--右-->
    <div id="fileRoot" style="display:block;visibility: visible" class="layui-col-sm3 layui-anim layui-anim-up">
        <div style="height: 100%; background: #333; color: #aaa; padding: 10px;">
            <div style="display:grid">
                <button id="back" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe65c;</i>
                </button>
                <input id="pwd" type="text" value="" readonly="readonly" class="layui-input">
            </div>

            <div id="fileList" style="overflow-y: scroll;height: 445px">
            </div>
        </div>
    </div>


</div>
</body>
<script src="/logView/layui/layui.js"></script>
<script>
    var websocket = null;
    var $ = null;
    layui.use(['layer', 'form'], function () {
        $ = layui.jquery;

        if ('WebSocket' in window) {

        } else {
            window.alert("浏览器不支持WebSocket");
            return;
        }

        //文件刷新
        listFilePost("/logView/remoteFileShow/listRoot");

        $('#back').on('click', function () {
            var pwd = $('#pwd').val();
            var pwdArray = pwd.split("/");
            pwdArray.splice(pwdArray.length - 1, 1);
            var backPwd;
            pwdArray.forEach(function (value, i) {
                if (i == 0) {
                    backPwd = "/" + value;
                } else if (backPwd == "/") {
                    backPwd = backPwd + value;
                } else {
                    backPwd = backPwd + "/" + value;
                }
            });
            $('#pwd').val(backPwd);
            var pwd = $('#pwd').val();
            var params = {};
            params.pathDir = pwd;
            listFilePost("/logView/remoteFileShow/listDir", params);
        });


        $('#view').on('click', function () {
            var filePathName = $('#filePathName')[0].value;
            if (filePathName != "" && filePathName != undefined) {
                open(filePathName);
            } else {
                layer.msg("请输入查看文件");
            }
        });

        $('#hidden').on('click', function () {
            var fileRoot = $('#fileRoot');
            if (fileRoot.css("display") == "none") {
                $('#fileRoot').css('display', 'block');
                $('#logView').removeClass('layui-col-sm12').addClass('layui-col-sm9');
            } else {
                $('#fileRoot').css('display', 'none');
                $('#logView').removeClass('layui-col-sm9').addClass('layui-col-sm12');
            }
        });


        function open(filePathName) {
            if ('WebSocket' in window) {
                if (websocket != null) {
                    websocket.close();
                }
                var url = 'ws://127.0.0.1:7003/logView/remoteLog?filePathName=' + filePathName;
                websocket = new WebSocket(url);
                websocket.onmessage = function (event) {
                    // 接收服务端的实时日志并添加到HTML页面中
                    $("#log-container div").append(event.data);
                    // 滚动条滚动到最低部
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                };
            } else {
                window.alert("浏览器不支持WebSocket");
                return;
            }
            return false;
        }

        $('#close').on('click', function () {
            if (websocket) {
                websocket.close();
                layer.msg("关闭成功!");
            } else {
                layer.msg("没连接WS!");
            }
            return false;
        });

        $('#clear').on('click', function () {
            $("#log-container div").html('');
            return false;
        });
    });

    function closeWebSocket() {
        if (websocket) {
            websocket.close();
            layer.msg("关闭成功!");
        } else {
            layer.msg("没连接WS!");
        }
        return false;
    }

    function enter(e) {
        var pwd = $('#pwd').val();
        var params = {};
        if (pwd == "/") {
            params.pathDir = pwd + e.text;
        } else {
            params.pathDir = pwd + '/' + e.text;
        }
        listFilePost("/logView/remoteFileShow/listDir", params);
    }

    function listFilePost(url, params) {
        $.post(url, params, function (data) {
            if(data.code != 200){
                layer.alert(data.msg);
                return;
            }
            $('#pwd').val(data.data.pwd);
            var files = data.data.files;
            var directorys = data.data.directorys;
            $("#fileList").html('');
            files.forEach(function (value, i) {
                if (i == 0) {
                    //第一个元素
                    $("#fileList").append("|" + "<br/>");
                    $("#fileList").append("|- - - -" + value + "<br/>");
                } else {
                    $("#fileList").append("|- - - -" + value + "<br/>");
                }
            });
            directorys.forEach(function (value, i) {
                if (i == 0) {
                    //第一个元素
                    $("#fileList").append("|" + "<br/>");
                    $("#fileList").append("|- - - -<a onclick='enter(this)' style='color: #007DDB'>" + value + "</a><br/>");
                } else {
                    $("#fileList").append("|- - - -<a onclick='enter(this)' style='color: #007DDB'>" + value + "</a><br/>");
                }
            });
            $("#fileList").append("|" + "<br/>");
        });
    }
</script>
</html>